<template>
	<div>
		<div class="outDiv">
			<go-back aa='../chooseCourse/selectCouerse'></go-back>
			<scroller style="top: 0.88rem;">
				<div>
					<Header contentTitle="添加意向专业类"></Header>
					<div class="main">
						<div class="careerTests">
							<div class="title">
								<div class="left">通过生涯测试添加专业类</div>
								<div class="right" v-show="careerList.length > 0" @click="commonJs.gosto('chooseRecord')">换一组</div>
							</div>
							<div class="content_no_add" v-if="careerList.length == 0">
								<p>尚未添加专业类</p>
								<button @click="commonJs.gosto('chooseRecord')">去测试</button>
							</div>
							<ul class="content_add" v-else>
								<li class="contentItem" v-for="(item, index) of careerList" :key="index" @click="handleCareerClick(item)">
									<div class="chooseIcon">
										<img v-if="careerChooseList.indexOf(item.major) !== -1" class="imgIcon" src="~/static/images/search_icon_sure.png"
										 alt="" />
										<img class="imgIcon" src="~/static/images/search_icon_nor.png" v-else alt="" />
									</div>
									<div class="name">
										<!-- <div>{{ item.major }}</div> -->
										<p>{{ item.major }}</p>
									</div>
								</li>
							</ul>
						</div>
						<div class="addBySelf">
							<div class="self_title">自主添加专业类</div>
							<ul class="chooseAreaList">
								<GetMoreChoose leftTitle="尚未添加专业类" :showArr="zhuanye" plhdText="请输入意向专业" @removeArrItem="finalList" modelType="1"
								 v-on:fromGetChose='getMoCheck'></GetMoreChoose>
							</ul>
						</div>
					</div>
					<div style="width: 100%;height: 2.8rem;"></div>
				</div>
			</scroller>
		</div>
		<div class="botFixed">
			<!-- <span @click="goNext" :class="$store.state.xxNum==3?'ss1':'ss2'">下一步</span> -->
			<span @click="goNext" class="ss2">下一步</span>
		</div>
	</div>
</template>

<script>
	import goBack from '~/components/goBack'
	import Header from '~/components/Header'
	import GetMoreChoose from '~/components/GetMoreChoose'
	import axios1 from '~/plugins/axios1';
	import ls from 'store2'
	export default {
		components: {
			Header,
			GetMoreChoose,
			goBack
		},
		data() {
			return {
				zhuanye: [],
				careerList: [],
				careerChooseList: [],
				botList: [],
				hasCho_1: true,
				hasCho_2: true,
				hasCho_3: false,
				xNum: this.$store.state.xxNum
			}
		},
		created() {
			this.commonJs.gologins();
			if (this.$route.query.type) {
				console.log('this.$route.query.type',this.$route.query.type)
				this.careerList = JSON.parse(this.$route.query.type);
		
			}else{
					this.getRepos()
			}
			this.$store.commit('changexxNum', 3)

		},

		mounted: function() {
			if (this.commonJs.isTerminal() == 'isAndroid') {
				if (window.history && window.history.pushState) {
					history.pushState(null, null, document.URL);
					window.addEventListener('popstate', this.fun, false); //false阻止默认事件 
				}
			}
		
		},
		destroyed() {
			// this.commonJs.xahui('../chooseCourse/selectCouerse')
			window.removeEventListener('popstate', this.fun, false);
		},
		methods: {
			
			fun() {
				this.$router.replace({
					path: '../chooseCourse/selectCouerse'
				})
			},
			isRepeat(arr) {
				var hash = {};
				for (var i in arr) {
					if (hash[arr[i]]) //hash 哈希
						return true;
					hash[arr[i]] = true;
				}
				return false;
			},
			goNext() {
		
// 				if (this.$store.state.xxNum == 3) {
// 					return false;
// 				}
// 				console.log('sahgnmian', this.careerChooseList)
// 				console.log('xiamian de ', this.botList)
				let saveArr = this.careerChooseList.concat(this.botList)
				let lens = saveArr.length;
				if(lens<1 || lens>3){
					this.$vux.toast.text('专业类至少需要添加一个，至多添加三个');
					return false;
				}else{
					let aaa = saveArr.join(',')
					this.saveMajors(aaa)
				}
				console.log('总共',saveArr)
// 				let saveArr = [];
// 				if (this.careerChooseList.length == 0) {
// 					saveArr = this.botList;
// 					console.log(1)
// 				} else if (this.botList == 0) {
// 					console.log(2)
// 					saveArr = this.careerChooseList;
// 				} else {
// 					console.log(3)
// 					saveArr = this.careerChooseList.concat(this.botList)
// 				}
// 				if (saveArr.length > 0 && saveArr.length < 4) {
// 					let aaa = saveArr.join(',')
// 
// 					console.log('saveArr', saveArr)
// 					console.log('aaa', aaa)
// 					this.saveMajors(aaa)
// 				} else {
// 					this.$vux.toast.text('专业类至少需要添加一个，至多添加三个');
// 				}

			},
			getRepos(){
				this.$vux.loading.show({text:"正在加载"});
				axios1.posts('/career/getReportList?userType=' + ls.get('userType')).then(res => {
					if (res.code === '0') {
						if (res.data.length == 0) {
				
						} else {
							let zhsData = res.data;
							if (zhsData[0].generate === 0) {
								this.flag = true;
							}
							var dofilter = function(element, index, array) {
								if (element.generate < 1) { // 年龄过滤
									return false;
								}
								return true;
							}
							zhsData=zhsData.filter(dofilter)
							/* test */
							this.careerList = zhsData[0].majors;
							this.$vux.loading.hide();
			
						}
				
				
					}
				}).catch((error) => {
					// this.$vux.toast.text('服务器繁忙，请稍后再试');
					this.$vux.loading.hide();
				})
			},
			saveMajors(str) {
				let obj = {
					majoring: str,
					userType: ls.get('userType')
				}
				axios1.posts('/curricula/saveMajor?majoring=' + str + '&userType=' + ls.get('userType')).then(res => {
					if (res.code === '0') {
						this.$vux.toast.text(res.message);
						// this.goto('advanCourse')
						this.commonJs.gosto('advanCourse')
					}
				}).catch(() => {
					this.$vux.toast.text('服务器繁忙，请稍后再试');
				})
			},
			getMoCheck(das) {
				console.log('gemoreHConsns传递过来的数据', das);
				this.botList = das;
			},
			finalList(data) {
				console.log('传递过来的数据', data);
				if (data.type == '1') {

					this.zhuanye = data.msgList;
				}

			},
			goback() {

			},
			// 是否保留参照需求
			handleCareerClick(obj) {
				this.xNum = this.$store.state.xxNum
				if (this.careerChooseList.indexOf(obj.major) !== -1) {
					this.careerChooseList = this.careerChooseList.filter(x => x != obj.major)
					this.xNum += 1
				} else {
// 					if (this.xNum < 1) {
// 						return false;
// 					}
					this.careerChooseList.push(obj.major);
					this.xNum -= 1
				}
				this.$store.commit('changexxNum', this.xNum)
				console.log('我是上面的', this.careerChooseList)
			},
			deleteChoose(index) {
				switch (index) {
					case 1:
						this.hasCho_1 = false;
						break;
					case 2:
						this.hasCho_2 = false;
						break;
					case 3:
						this.hasCho_3 = false;
						break;
					default:
						break;
				}
			},
			goto(routerName, queryData) {
				this.$router.push({
					path: routerName,
					query: {
						type: queryData
					}
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.botFixed {
		position: fixed;
		height: 1.2rem;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px -4px 10px 0px rgba(204, 204, 204, 0.2);
		left: 0;
		bottom: 0;
		width: 7.5rem;
		overflow: hidden;

		span {
			width: 3.8rem;
			height: 0.7rem;
			// background: rgba(108, 191, 32, 1);
			border-radius: 0.35rem;
			font-size: 0.3rem;
			font-weight: bold;
			color: rgba(255, 255, 255, 1);
			text-align: center;
			display: block;
			line-height: 0.7rem;
			margin: 0.25rem auto;
		}

		.ss1 {
			background: #eee
		}

		.ss2 {
			background: rgba(108, 191, 32, 1);
		}
	}

	.header {
		width: 100%;
		height: 0.88rem;
		text-align: right;
		padding: 0 0.3rem;
		background: transparent;
		font-size: 0.3rem;
		letter-spacing: 0.05rem;
		color: #222;
		font-weight: bold;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.imgIcon {
			width: 0.4rem;
			height: 0.4rem;
		}
	}

	.outDiv {
		width: 100%;
		height: 100vh;
		background: #FFF;

		.main {
			margin-top: 0.3rem;
			padding: 0 0.3rem;

			.careerTests {
				margin-bottom: 0.31rem;

				.title {
					margin-bottom: 0.32rem;
					letter-spacing: 0.02rem;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.left {
						color: #222;
						font-weight: bold;
						font-size: 0.3rem;
					}

					.right {
						font-size: 0.26rem;
						font-weight: bold;
						color: #6CBF20;
					}
				}

				.content_no_add {
					width: 100%;
					height: 3rem;
					background: #FAFAFA;
					border-radius: 0.1rem;
					text-align: center;
					padding-top: 0.9rem;

					p {
						font-size: 0.26rem;
						font-weight: bold;
						color: #999;
						margin-bottom: 0.2rem;
					}

					button {
						width: 1.8rem;
						height: 0.6rem;
						line-height: 0.6rem;
						text-align: center;
						border-radius: 0.1rem;
						border: 2px solid #6CBF20;
						color: #6CBF20;
						font-size: 0.26rem;
						font-weight: bold;
						letter-spacing: 0.03rem;
						background: transparent;
						padding: 0;
						outline: none;
					}
				}

				.content_add {
					width: 100%;
					min-height: 4.5rem;
					height: auto;
					border: 1px solid #EEE;
					border-radius: 0.1rem;
					padding: 0;
					list-style: none;

					.contentItem {
						padding: 0.3rem;
						display: flex;
						align-items: center;
						border-bottom: 1px solid #EEE;

						.chooseIcon {
							margin-right: 0.28rem;

							.imgIcon {
								width: 0.4rem;
								height: 0.4rem;
							}
						}

						.name {
							text-align: left;
							padding: 0.25rem;
							// line-height: 0.9rem;
							// 							div {
							// 								color: #222;
							// 								font-size: 0.3rem;
							// 								font-weight: bold;
							// 								margin-bottom: 0.1rem;
							// 							}

							p {
								color: #BBB;
								font-size: 0.26rem;
								font-weight: bold;
								line-height: 0.45rem
							}
						}
					}

					li:last-child {
						border-bottom: none;
					}
				}
			}

			.addBySelf {
				.self_title {
					color: #222;
					font-size: 0.3rem;
					font-weight: bold;
					margin-bottom: 0.3rem;
				}

				.chooseAreaList {
					padding-left: 0;
					list-style: none;

					li:first-child {
						border-top-left-radius: 0.1rem;
						border-top-right-radius: 0.1rem;
					}

					li:last-child {
						border-bottom-left-radius: 0.1rem;
						border-bottom-right-radius: 0.1rem;
					}

					li:nth-child(2),
					li:nth-child(3) {
						border-top: none;
					}

					li {
						width: 100%;
						height: 1.5rem;
						border: 1px solid #EEE;
						// padding-left: 1.1rem;
						padding-right: 0.3rem;

						// overflow: hidden;
						.hasCho {
							height: 1.5rem;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.describe {
								h2 {
									color: #222;
									font-size: 0.3rem;
									font-weight: bold;
									margin-bottom: 0.1rem;
								}

								p {
									color: #BBB;
									font-size: 0.26rem;
									font-weight: bold;
								}
							}


						}

						.hasNotChoose {
							height: 1.5rem;
							display: flex;
							justify-content: space-between;
							align-items: center;
							font-size: 0.26rem;

							span {
								font-weight: bold;
								color: #999;
							}

							button {
								width: 1.8rem;
								height: 0.6rem;
								background: #FFF;
								border: 2px solid #6CBF20;
								border-radius: 0.1rem;
								outline: none;
								color: #6CBF20;
								font-weight: bold;
								letter-spacing: 0.03rem;
							}
						}
					}
				}
			}
		}
	}
</style>
